<template>
    <div class="nav">
        <div class="list">
            <a href="#" v-for="(v,index) in arr" :key="index" :class="{fstyle:current===index}" @click="fun(index)">{{v}}</a>
        </div>
        <span class="photo"></span>
    </div>
</template>

<script>
export default {
    name:"navPage",
    data(){
        return{
            current:0,
            arr:["首页","王者荣耀","绝地求生","英雄联盟","星秀","吃喝玩乐","主机游戏","和平精英","穿越火线","颜值","二次元","地下城与勇士","暴雪专区","一起看","我的世界"]
        }
    },
    methods:{
        fun(index){
            this.current = index
        }
    }
}
</script>

<style scoped>
.nav {
  width: 100vw;
  height: 12vw;
  box-sizing: border-box;
  padding-left: 2.8vw;
  padding-right: 10.53333333vw;
  position: relative;
}
.nav .list {
  width: 86.66666667vw;
  height: 12vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  overflow: auto;
}
.nav .list a {
  height: 5.7vw;
  flex-shrink: 0;
  margin-right: 6.66666667vw;
  font-size: 4vw;
  color: #151515;
}
.nav .list .fstyle {
    color: #ffa201;
    border-bottom: 0.53333333vw solid #ffa201;
}
.nav .photo {
  width: 10.53333333vw;
  height: 90%;
  position: absolute;
  right: 0;
  top: 0;
  background: url(https://ssr-static.msstatic.com/h5/mobile/@public-online/imgs/nav/category_icon_down.2a263fed11c4994bca32b3234ba9073f.png) no-repeat center / 5.33333333vw 5.33333333vw;
}

</style>